<script setup lang="ts">
defineProps<{
	systemContent:object,
	systemProps:object,
}>()

import { computed, ref } from 'vue';
import Keyboard from './Keyboard.vue';

let powered = ref(true);
function power() {
	powered.value = !powered.value;
}

</script>

<template>
  		<div class="note-book">
			<div class="cover">			
				<div class="camara"></div>			
				<component v-if="powered" :is="systemContent" v-bind="systemProps"></component>		
				<div v-else class="poweroff"></div>
			</div>			
			<div class="under">
				<Keyboard :full="false" @change="keys=>keys[0]==200&&power()" />
				<div class="touchboard">
					<div></div>
				</div>
			</div>
		</div>
</template>

<style scoped>
	.note-book {
		/* width: 100%;
		height: 100%; */
		overflow: hidden;
		font-size: 1em;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;		
		perspective:110em;		
		padding: 1em;
	}

	.cover {
		border: 0.6em solid rgb(78, 78, 78);
		width: 30em ;
		height: 18em;
		border-radius: 0.5em;
		padding:0.1em;
		background-color: rgb(78, 78, 78);
		/* transform: rotateX(-50deg); */
		transform: rotate3d(0,1, 0, 30deg) rotate3d(1, 0, 0, -30deg) ;
	}
	.camara {
		width: 100%;
	}
	.poweroff {
		width: 100%;
		height: 100%;
		background-color: rgb(29, 28, 28);
		
	}

	.under {
		font-size: 0.58em;
		margin-top: -5.7em;
		/* transform: rotateX(50deg); */
		transform: rotate3d(0,1, 0, 30deg) rotate3d(1, 0, 0, 30deg) ;

	}
	.touchboard {
		width: 100%;
		height: 7em;
		background-color: rgb(29, 28, 28);
		border: 0.6em solid rgb(29, 28, 28);
		border-radius: 0.7em;
		margin-top: -1em;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center
	}
	.touchboard div {
		width: 10em;
		height: 100%;
		background-color: rgb(78, 78, 78);
		border-radius: 0.7em;
	}
		
</style>
